<script lang="tsx" setup>
import type { SearchItem, ColumnItem } from '@/components/common/ProTable/interface'
import Empty from '@/components/common/Empty.vue'
import demoService from '@/api/modules/demo'
import { ElRadioGroup, ElRadio } from 'element-plus'

const tableRef = ref<any>()

const extraParam = reactive({
  belong: 0
})

const searchForm: SearchItem[] = [
  {
    key: 'test',
    defaultValue: 0
  },
  {
    key: 'searchKey',
    label: '搜索关键字',
    el: 'input'
  },
  {
    key: 'searchKey',
    label: '搜索关键字',
    el: 'input'
  },
  {
    key: 'searchKey2',
    label: '搜索关键字2',
    el: 'input',
    props: {
      placeholder: '请输入搜索关键字2'
    },
    defaultValue: '123'
  },
  {
    key: 'timeRanges',
    label: '时间范围',
    el: 'date-picker',
    props: {
      type: 'daterange',
      valueFormat: 'YYYY-MM-DD',
      popperOptions: {
        modifiers: [
          {
            name: 'flip',
            options: {
              fallbackPlacements: ['bottom'],
              allowedAutoPlacements: ['bottom']
            }
          }
        ]
      }
    },
    events: {
      change: (val: any) => {
        tableRef.value.searchParam.startTime = val && val[0]
        tableRef.value.searchParam.endTime = val && val[1]
      }
    }
  },
  {
    key: 'customModule1',
    label: '自定义标签',
    render: () => {
      return <div>123</div>
    }
  },
  {
    key: 'customModule2',
    label: '自定义组件',
    render: () => {
      return <Empty size="small" />
    }
  },
  {
    key: 'radio',
    defaultValue: 1,
    label: 'element-plus 组件',
    render: () => {
      return (
        <ElRadioGroup v-model={tableRef.value.searchParam.radio}>
          <ElRadio value={1}>Option A</ElRadio>
          <ElRadio value={2}>Option B</ElRadio>
        </ElRadioGroup>
      )
    }
  }
]
const columns = reactive<ColumnItem[]>([
  { type: 'selection', fixed: 'left', width: 70 },
  { type: 'sort', label: '排序', width: 80 },
  {
    prop: 'licenseNo',
    label: '车牌号',
    width: 120
  },
  {
    prop: 'seriesName',
    label: '年龄',
    formatter: (row, column, value) => {
      return `${row.factoryName} - ${value}`
    }
  },
  {
    prop: 'address',
    label: '地址'
  },
  {
    type: 'operation',
    label: '操作',
    operation: [
      {
        label: '查看',
        click: (scope) => {
          ElMessage.success(`查看`)
          console.log('查看', scope)
        }
      },
      {
        label: '编辑',
        click: (scope) => {
          ElMessage.success(`编辑`)
          console.log('编辑', scope)
        }
      },
      {
        label: '删除',
        show: (scope) => {
          return scope.row.vehicleType === '小型轿车'
        },
        click: (scope) => {
          ElMessage.success(`删除`)
          console.log('删除', scope)
        }
      }
    ]
  }
])
const handleDragSort = ({ newIndex, oldIndex }: { newIndex: number; oldIndex: number }) => {
  console.log(newIndex, oldIndex)
  console.log(tableRef.value?.tableData)
  ElMessage.success(`修改列表排序成功 ${oldIndex} -> ${newIndex}`)
}

const handleDelete = (scope: any) => {
  console.log(scope)
}

// const testApi = (params: any) => {
//   let newParams = JSON.parse(JSON.stringify(params))
//   newParams.timeRanges && (newParams.startTime = newParams.timeRanges[0])
//   newParams.timeRanges && (newParams.endTime = newParams.timeRanges[1])
//   delete newParams.timeRanges
//   return service.getUserList(newParams)
// }

const handleClearSelection = () => {
  tableRef.value.ref.clearSelection()
}
const handleTest = () => {
  tableRef.value.searchParam.test = 1
  extraParam.belong = 1
  tableRef.value.search()
}
</script>

<template>
  <ProTable
    ref="tableRef"
    :api="demoService.getVehicleList"
    :extraParam="extraParam"
    :columns="columns"
    :searchForm="searchForm"
    @dragSort="handleDragSort"
    isFull
    class="h-100% p-20 box-border"
  >
    <template #tableHeader="scope">
      <el-button type="primary" @click="handleTest"
        ><i class="iconfont icon-plus"></i>新增数据</el-button
      >
      <el-button type="primary" @click="handleClearSelection"
        ><i class="iconfont icon-download"></i>批量导出</el-button
      >
      <el-button type="primary" @click="handleDelete(scope)"
        ><i class="iconfont icon-delete"></i>批量删除</el-button
      >
    </template>
    <template #name="{ row }">
      <el-tag type="danger">{{ row.name }}</el-tag>
    </template>
    <template #addressHeader="{ row }">
      <el-tag type="danger">自定义表头</el-tag>
    </template>
  </ProTable>
</template>
